import React, { useEffect, useRef } from 'react';
// import axios from 'axios';
import Parent from './parent';
import Son from './son';

const Index = () => {
    const ParentRef = useRef<{
        setList: (newList: any[]) => void;
    }>(null);
    const SonRef = useRef<{
        setList: (newList: any[]) => void;
    }>(null);

    const fetchFn = async () => {
        await fetch('https://jsonplaceholder.typicode.com/posts/1').catch(() => {});
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/2');
        xhr.send();

        // axios.get('https://jsonplaceholder.typicode.com/posts/4').catch(() => {});
    };

    useEffect(() => {
        fetchFn();
    }, []);

    const styleMargin = {
        marginRight: 8,
    };

    return (
        <>
            <h3>组件错误测试</h3>

            <button
                style={styleMargin}
                onClick={() => {
                    SonRef.current?.setList([null, NaN, {}]);
                }}
            >
                son 制造错误
            </button>
            <button
                style={styleMargin}
                onClick={() => {
                    ParentRef.current?.setList([null, NaN, {}]);
                }}
            >
                parent 制造错误
            </button>
            <button
                style={styleMargin}
                onClick={() => {
                    ParentRef.current?.setList([]);
                    SonRef.current?.setList([]);
                }}
            >
                移除组件错误
            </button>
            <hr />
            <Parent ref={ParentRef} />

            <Son ref={SonRef} />
        </>
    );
};

export default Index;
